<template>
  <div class="login_container">
    <span id="sys_name" ref="sys_name">区块链药品防伪溯源系统</span>
    <div class="login_box" v-if="isToRegister === 1">
      <p class="loginText">登录</p>

      <el-tabs v-model="isUser" stretch style="padding: 0 20px">
        <el-tab-pane label="药品生产商" name="producer">
          <div style="height: 200px">
            <!-- 登陆表单 -->
            <el-form
              label-width="80px"
              :model="loginFormForProducer"
              class="login_form"
              :rules="loginFormRulesForProducer"
              ref="loginFormRefForProducer"
            >
              <!-- 公司名称 -->
              <el-form-item
                label="公司名称"
                class="inputbox"
                prop="company_name"
              >
                <el-input
                  prefix-icon="el-icon-user"
                  v-model="loginFormForProducer.company_name"
                  placeholder="请输入公司名称"
                ></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="密码" class="inputbox" prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="loginFormForProducer.password"
                  type="password"
                  placeholder="请输入密码"
                  @keyup.enter.native="login()"
                ></el-input>
              </el-form-item>
              <!-- 登陆注册按钮 -->
              <div class="btns">
                <el-button type="primary" round @click="login">登录</el-button>
                <el-button type="success" round @click="ToRegister"
                  >注册</el-button
                >
              </div>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="药品经销商" name="distributor">
          <div style="height: 200px">
            <!-- 登陆表单 -->
            <el-form
              label-width="80px"
              :model="loginFormForDistributor"
              class="login_form"
              :rules="loginFormRulesForDistributor"
              ref="loginFormRefForDistributor"
            >
              <!-- 公司名称 -->
              <el-form-item
                label="公司名称"
                class="inputbox"
                prop="company_name"
              >
                <el-input
                  prefix-icon="el-icon-user"
                  v-model="loginFormForDistributor.company_name"
                  placeholder="请输入公司名称"
                ></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="密码" class="inputbox" prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="loginFormForDistributor.password"
                  type="password"
                  placeholder="请输入密码"
                  @keyup.enter.native="login()"
                ></el-input>
              </el-form-item>
              <!-- 登陆注册按钮 -->
              <div class="btns">
                <el-button type="primary" round @click="login">登录</el-button>
                <el-button type="success" round @click="ToRegister"
                  >注册</el-button
                >
              </div>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户" name="user">
          <div style="height: 200px">
            <!-- 登陆表单 -->
            <el-form
              label-width="80px"
              :model="loginFormForUser"
              class="login_form"
              :rules="loginFormRulesForUser"
              ref="loginFormRefForUser"
            >
              <!-- 用户名 -->
              <el-form-item label="用户名" class="inputbox" prop="name">
                <el-input
                  prefix-icon="el-icon-user"
                  v-model="loginFormForUser.name"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="密码" class="inputbox" prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="loginFormForUser.password"
                  type="password"
                  placeholder="请输入密码"
                  @keyup.enter.native="login()"
                ></el-input>
              </el-form-item>
              <!-- 登陆注册按钮 -->
              <div class="btns">
                <el-button type="primary" round @click="login">登录</el-button>
                <el-button type="success" round @click="ToRegister"
                  >注册</el-button
                >
              </div>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Register v-else-if="isToRegister === 2" @toLogin="toLogin"></Register>
    <el-card
      v-else-if="isToRegister === 3"
      @toLogin="toLogin"
      shadow="always"
      :body-style="{ padding: '20px' }"
      class="login_box"
    >
      <div
        slot="header"
        style="padding-left: 0; display: flex; justify-content: space-between"
      >
        <span
          ><el-button icon="el-icon-back" @click="isToRegister = 1"
            >返回登录</el-button
          ></span
        >
        <span class="loginText">监管部门登录</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
      <!-- 管理员登陆表单 -->
      <el-form
        label-width="80px"
        :model="loginFormForAdmin"
        class="login_form"
        style="position: relative; margin-top: 20px"
        :rules="loginFormRulesForAdmin"
        ref="loginFormForAdminRef"
      >
        <!-- 管理员账号 -->
        <el-form-item label="账号" class="inputbox" prop="adminName">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginFormForAdmin.adminName"
            placeholder="管理员账号"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" class="inputbox" prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginFormForAdmin.password"
            type="password"
            placeholder="请输入密码"
            @keyup.enter.native="loginAsAdmin()"
          ></el-input>
        </el-form-item>
        <!-- 登陆注册按钮 -->
        <div class="btns">
          <el-button type="primary" round @click="loginAsAdmin">登录</el-button>
        </div>
      </el-form>
      <div></div>
    </el-card>

    <el-button
      style="
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 18px;
        text-decoration-line: underline;
      "
      type="text"
      @click="handleItemChange"
    >
      市场监管部门登录
    </el-button>
  </div>
</template>

<script>
import Register from "@/components/Register";
import axios from "axios";
// axios.defaults.baseURL = "http://120.78.163.6:8081";
axios.defaults.baseURL = "http://localhost:7500";
export default {
  components: {
    Register
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      if (this.isUser === "user") {
        if (!value) {
          return callback(new Error("请输入手机号码"));
        }
        let reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const checkWallet = (rule, value, callback) => {
      if (this.isUser === "pders") {
        if (!value) {
          return callback(new Error("请输入钱包地址"));
        }
        callback();
      }
    };
    return {
      //登陆表单
      loginFormForDistributor: {},
      loginFormForProducer: {},
      loginFormForUser: {},
      isUser: "producer",
      //1为登录，2为注册，3为管理员
      isToRegister: 1,
      loginFormRulesForProducer: {
        company_name: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      loginFormRulesForDistributor: {
        company_name: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      loginFormRulesForUser: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      loginFormForAdmin: {},
      loginFormRulesForAdmin: {
        adminName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    async login() {
      if (this.isUser === "distributor") {
        this.$refs.loginFormRefForDistributor.validate(async (valid) => {
          if (!valid) return this.$message.error("请检查公司名称或密码");
          try {
            const res = await axios.post(
              "/api/v2/login/distributor",
              this.loginFormForDistributor
            );
            console.log(res);
            if (res.data.code === 9998)
              return this.$message.error("注册申请未通过!");
            if (res.status !== 200 || res.data.code !== 0)
              return this.$message.error("登陆失败，请检查公司名称或密码");

            this.$message({ message: "登陆成功", type: "success" });
            console.log(res.data.data);
            //保存用户数据

            window.sessionStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data)
            );
            //跳转主页
            this.$router.push("home");
          } catch {
            this.$message.error("登陆失败!");
          }
        });
      } else if (this.isUser === "producer") {
        this.$refs.loginFormRefForProducer.validate(async (valid) => {
          if (!valid) return this.$message.error("请检查公司名称或密码");
          try {
            const res = await axios.post(
              "/api/v2/login/manufacturer",
              this.loginFormForProducer
            );
            console.log(res);
            if (res.data.code === 9998)
              return this.$message.error("注册申请未通过!");
            if (res.status !== 200 || res.data.code !== 0)
              return this.$message.error("登陆失败，请检查公司名称或密码");

            this.$message({ message: "登陆成功", type: "success" });
            console.log(res.data.data);
            //保存用户数据

            window.sessionStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data)
            );
            //跳转主页
            this.$router.push("home");
          } catch {
            this.$message.error("登陆失败!");
          }
        });
      } else if (this.isUser === "user") {
        this.$refs.loginFormRefForUser.validate(async (valid) => {
          if (!valid) return this.$message.error("请检查用户名或密码!");
          try {
            const { data: res } = await axios.post(
              "/api/v2/login/consumer",
              this.loginFormForUser
            );
            console.log(res);
            if (res.code === 9998)
              return this.$message.error("注册申请未通过!");
            if (res.code !== 0) throw new Error("登录失败！");
            this.$message({ message: "登陆成功", type: "success" });
            //保存用户数据

            window.sessionStorage.setItem("userInfo", JSON.stringify(res.data));
            //跳转主页
            this.$router.push("home");
          } catch {
            this.$message.error("登陆失败!");
          }
        });
      }
    },
    ToRegister() {
      this.$refs.sys_name.style.display = "none";
      this.isToRegister = 2;
    },
    toLogin() {
      this.isToRegister = 1;
      this.$refs.sys_name.style.display = "";
    },

    /**
     * @description 处理下拉框的值变化事件
     */
    handleItemChange() {
      this.isToRegister = 3;
    },

    /**
     * @description 以管理员身份登录
     */
    loginAsAdmin() {
      this.$refs.loginFormForAdminRef.validate(async (valid) => {
        if (!valid) return this.$message.error("登陆失败!");
        await axios
          .post("api/v2/login/admin", {
            system_account: this.loginFormForAdmin.adminName,
            password: this.loginFormForAdmin.password
          })
          .then((res) => {
            console.log(res);
            // if(res.data.code !== 0 ) return this.$message.error("登陆失败!");
            if (res.data.code !== 0) throw new Error("登录失败!");
            window.sessionStorage.setItem(
              "adminInfo",
              JSON.stringify(res.data.data)
            );
            this.$message.success("登录成功!");
            this.$router.push("Admin");
          })
          .catch(() => {
            return this.$message.error("登录失败!");
          });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.html{
  min-width: 1440px;
}

.login_container {
  background-color: #2b4b6b;
  background-image: url("~@/assets/images/bckg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  #sys_name {
    color: #fff;
    position: absolute;
    top: 12%;
    left: 37%;
    font-size: 36px;
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

.login_box {
  width: 480px;
  height: 330px;
  background-color: #ffffff;
  border-radius: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .loginText {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
  }
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;

  .el-button {
    width: 40%;
  }
}

.login_form {
  position: absolute;
  bottom: 10%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

/deep/
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-card__header {
  padding-left: 10px;
}
</style>
<style lang="less">
.inputbox {
  //
  .el-form-item__label {
    text-align: center;
  }

  .el-form-item__content {
    .el-form-item__error {
      padding-top: 8px;
    }

    .el-input {
      position: absolute;
      margin: 0px;
    }

    .el-input--prefix {
      .el-input__inner {
        //background-color: red;
        width: 90%;
        height: 46px;
        border-radius: 100px;
      }
    }
  }
}
.test_wrapper {
  height: 100px;
  width: 100px;
  background-color: #fff;
}
</style>